
// import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";

function Index() {
  const nav = useNavigate();
  const [announcement, setAnnouncement] = useState<any>(null);

  type Announcement = {
    id: string;
    title: string;
    source: string;
    content: string;
    publishTime: string;
    viewCount: number;
  }

  const handleBack = () => {
    nav(-1);   
  };

  useEffect(() => {
    // 模拟获取公告详情
    const mockAnnouncement: Announcement = {
      id: '1',
      title: '智慧医院便民平台APP上线啦,手机也能问诊医生啦',
      source: '四川省保健社区中心',
      content: '智慧医院建设的第二个领域是"面向患者的智慧服务"。2019年,国家卫健委发布《医院智慧服务分级评估标准体系(试行)》，将"医院智慧服务"分为5个等级。主要指医院(特别是三级医院)利用互联网、物联网等信息化手段，为患者提供预约诊疗、候诊提醒、院内导航等服务。服务范围覆盖患者诊前、诊中、诊后各环节，以及基本安全。',
      publishTime: '2020-01-01 17:30:20',
      viewCount: 10000
    };

    setAnnouncement(mockAnnouncement);
  }, []);

  return (
    <div style={{ 
      width: '100vw', 
      minHeight: '100vh', 
      background: '#fff'
    }}>
      {/* 顶部导航栏 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '12px 16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div 
            onClick={handleBack}
            style={{ 
              fontSize: '20px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ‹
          </div>
          <div style={{ fontSize: '18px', fontWeight: 600, color: '#333' }}>
            公告详情
          </div>
        </div>
       
      </div>

      {/* 内容区域 */}
      <div style={{ 
        padding: '16px'
      }}>
        {announcement && (
          <>
            {/* 公告标题 */}
            <h1 style={{
              fontSize: '20px',
              fontWeight: 600,
              color: '#333',
              marginBottom: '12px',
              lineHeight: '1.4'
            }}>
              {announcement.title}
            </h1>

            {/* 发布机构 */}
            <div style={{
              fontSize: '14px',
              color: '#999',
              marginBottom: '20px'
            }}>
              {announcement.source}
            </div>

            {/* 公告正文 */}
            <div style={{
              fontSize: '16px',
              color: '#333',
              lineHeight: '1.6',
              marginBottom: '40px'
            }}>
              {announcement.content}
            </div>

            {/* 底部信息 */}
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              paddingTop: '20px',
              borderTop: '1px solid #f0f0f0'
            }}>
              <div style={{
                fontSize: '14px',
                color: '#999'
              }}>
                发布于 {announcement.publishTime}
              </div>
              <div style={{
                fontSize: '14px',
                color: '#999'
              }}>
                {announcement.viewCount >= 10000 ? '1W+' : announcement.viewCount}人已读
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

export default Index;